<template>
  <section>
    <Card>
      <p slot="title">订单管理</p>
      <Row type="flex" justify="center">
        <Col span="8" class="center">
          当日流水：{{stream.today}}元
        </Col>
        <Col span="8" class="center">
          当月流水：{{stream.month}}元
        </Col>
        <Col span="8" class="center">
          总流水：{{stream.total}}元
        </Col>
      </Row>
      <Table stripe border :data="list" :columns="columns" />
      <Page
        :current="page"
        :style="pageStyle"
        @on-change="changePage"
        :page-size="10"
        :total="total"
      ></Page>
    </Card>
  </section>
</template>
<script>
import dayjs from 'dayjs';

export default {
  name: 'order_manage',
  data() {
    return {
      total: 0,
      page: 1,
      list: [],
      stream: {
        month: 0,
        today: 0,
        total: 0
      },
      columns: [],
      pageStyle: {
        marginTop: "15px",
      },
    }
  },
  methods: {
    changePage(page) {
      this.jsonrpc.blind.admin
        .getUserPayRecords({ start: (page - 1) * 10, limit: 10 })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.page = page;
          this.stream = res.stream;
          if(res.is_opera) {
            this.columns = [{
                title: "头像",
                width: 100,
                align: "center",
                render: (h, params) => {
                  return h('img', {
                    domProps: {
                      src: params.row.headimgurl
                    },
                    style: {
                      marginTop: "5px",
                      borderRadius:"50%",
                      height: '40px',
                      lineHeight:"40px"
                    }
                  });
                },
              },
              {
                title: "姓名",
                width: 200,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.nickname ? params.row.nickname : "");
                },
              },
              {
                title: "openid",
                width: 250,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.open_id);
                },
              },
              {
                title: "金额",
                width: 100,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.total_fee ? params.row.total_fee/100 : 0);
                },
              },
              {
                title: "嘉宾名称",
                width: 200,
                align: "center",
                render: (h, params) => {
                  let typeMap = {
                    "red_recommend":"红娘牵线服务",
                    "red_one": "红娘精准服务/单次",
                    "red_three": "红娘精准服务/三次",
                    "one": "隐私信息/单次",
                    "five":"隐私信息/五次",
                    "ten":"隐私信息/十次",
                    "member_month": "月度会员支付",
                    "member_season": "季度会员支付",
                    "member_half": "半年会员支付"
                  }
                  if(params.row.fee_type.startsWith("member")) {
                    return h("div", typeMap[params.row.fee_type] || "");
                  }
                  return h("Button", {
                    props: {
                      type: "text",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'user_detail',
                          query: {
                            id: params.row.customer_id,
                            name: params.row.customer_name,
                            status: "view"
                          }
                        })
                      },
                    },
                  }, params.row.customer_name);
                },
              },
              {
                title: "订单号",
                align: "center",
                width: 300,
                render: (h, params) => {
                  return h("div", params.row.out_trade_no);
                }
              },
              {
                title: "订单类型",
                align: "center",
                width: 200,
                render: (h, params) => {
                  let typeMap = {
                    "red_recommend":"红娘牵线服务",
                    "red_one": "红娘精准服务/单次",
                    "red_three": "红娘精准服务/三次",
                    "one": "隐私信息/单次",
                    "five":"隐私信息/五次",
                    "ten":"隐私信息/十次",
                    "member_month": "月度会员支付",
                    "member_season": "季度会员支付",
                    "member_half": "半年会员支付"
                  }
                  return h("div", typeMap[params.row.fee_type] || "");
                }
              },
              {
                title: "订单状态",
                align: "center",
                width: 100,
                render: (h, params) => {
                  return h("div", params.row.status);
                }
              },
              {
                title: "订单具体时间",
                align: "center",
                width: 200,
                render: (h, params) => {
                  let date = dayjs(params.row.create_date).format('YYYY-MM-DD HH:mm:ss');
                  return h("div", date);
                }
              },{
                title: "操作",
                key: "view",
                width: 100,
                fixed: "right",
                align: "center",
                render: (h, params) => {
                  let bar = [];
                  bar.push(
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small",
                          disabled: params.row.status == "支付成功" ? false : true
                        },
                        style: {
                          marginRight: "10px",
                          backgroundColor: params.row.status == "支付成功" ? "red" : "#ccc",
                          color: "#fff",
                          border: "none"
                        },
                        on: {
                          click: () => {
                            if(params.row.status == "退款成功") {
                              this.$Message.error("该订单已退过款");
                              return;
                            }
                            this.$Modal.confirm({
                                title: '确定退款?',
                                onOk: () => {
                                    this.jsonrpc.blind.admin.refund(params.row.id).then((res)=> {
                                      this.$Message.success("微信退款中");
                                      this.changePage(this.page);
                                    })
                                }
                            })
                            
                          },
                        },
                      },
                      params.row.status == "支付成功" ? "退款" : "已退款"
                    )
                  )
                  return h("div", bar);
                },
              }
            ]
          } else {
            this.columns = [{
                title: "头像",
                width: 100,
                align: "center",
                render: (h, params) => {
                  return h('img', {
                    domProps: {
                      src: params.row.headimgurl
                    },
                    style: {
                      marginTop: "5px",
                      borderRadius:"50%",
                      height: '40px',
                      lineHeight:"40px"
                    }
                  });
                },
              },
              {
                title: "姓名",
                width: 200,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.nickname ? params.row.nickname : "");
                },
              },
              {
                title: "openid",
                width: 250,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.open_id);
                },
              },
              {
                title: "嘉宾名称",
                width: 200,
                align: "center",
                render: (h, params) => {
                  let typeMap = {
                    "red_recommend":"红娘牵线服务",
                    "red_one": "红娘精准服务/单次",
                    "red_three": "红娘精准服务/三次",
                    "one": "隐私信息/单次",
                    "five":"隐私信息/五次",
                    "ten":"隐私信息/十次",
                    "member_month": "月度会员支付",
                    "member_season": "季度会员支付",
                    "member_half": "半年会员支付"
                  }
                  if(params.row.fee_type.startsWith("member")) {
                    return h("div", typeMap[params.row.fee_type] || "");
                  }
                  return h("Button", {
                    props: {
                      type: "text",
                      size: "small"
                    },
                    on: {
                      click: () => {},
                    },
                  }, params.row.customer_name);
                },
              },
              {
                title: "金额",
                width: 100,
                align: "center",
                render: (h, params) => {
                  return h("div", params.row.total_fee ? params.row.total_fee/100 : 0);
                },
              },
              {
                title: "订单号",
                align: "center",
                width: 310,
                render: (h, params) => {
                  return h("div", params.row.out_trade_no);
                }
              },
              {
                title: "订单状态",
                align: "center",
                width: 100,
                render: (h, params) => {
                  return h("div", params.row.status);
                }
              },
              {
                title: "订单具体时间",
                align: "center",
                width: 200,
                render: (h, params) => {
                  let date = dayjs(params.row.create_date).format('YYYY-MM-DD HH:mm:ss');
                  return h("div", date);
                }
              }
            ]
          }
        });
    }
  },
   mounted() {
    this.changePage(1);
  },
}

</script>
<style scoped>
.center {
  text-align: center;
  margin-bottom: 20px;
}
</style>